
<template>
<div class="buylist">
    <div class="bg"></div>
    <van-nav-bar id="van-bar" :title="title" fixed :border="border" left-arrow @click-left="onClickLeft">
            <template #left>
                <img :style="{width:widthPx,height:heightPx}" src="@/assets/iconPerfectInformation/nav_back@2x.png" />
            </template>
        </van-nav-bar>
        <div  :style="'margin-top:'+topheight+'px;height:calc(100vh - '+topheight+'px);width:100%;overflow:auto;'">
        <van-cell-group>
 
  <van-cell title="更换绑定手机号" :value="phone" is-link @click="eidtPhone"/>
  <van-cell title="删除账号" label="永久注销你的账号，注销成功后该账号将无法使用，账号下的所有数据将被删除！"  @click="deluser" is-link />
    </van-cell-group>
        </div>
      <div class="error-box" v-if="isshow">
        <div class="bg1" @click="isshow=false"></div>
    <div class="error" >
        <div class="head">
            <span>更换手机号</span>
            <img src="@/assets/myicon/popup-rule.png" alt="">
        </div>
        <div class="phone-box">
          <p class="lable">手机号</p>
          <div><input class="phone" v-model="phone1" type="text" rules></div>
          <p class="lable">验证码</p>
          <div><input class="yzm" v-model="code" type="text">
          <span v-if="countdown" @click="getCode">{{ yzm_title }}</span>
          <span style="color: rgba(118, 118, 118, 1); font-size: 16px" v-if="!countdown">{{ count }}s</span>
          </div>
          <div class="btn">
          <van-button  type="danger" size="small" @click="isshow=false">取消</van-button>
          <van-button  type="primary" size="small" @click="submit">提交</van-button>

          </div>
        </div>
    </div>
    </div>
  </div>
 
</template>

<script>
import { getMyInfo,verify,  } from '@/api/index'
import { editPhone,deluser } from '@/api/setting'

import { Dialog } from 'vant';
import { Toast } from 'vant'

export default {
 components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data(){
      return{
        border:'',
        phone:"",
        phone1:"",
        code:"",
        show:false,
        widthPx:'28px',
        heightPx:'28px',
        topheight:0,
        title:'设置',
        isshow:false,
        countdown:true,
        count:"",
         rules: {
        tel: [
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'onBlur',
          },
        ],
        code: [
          {
            pattern: /^\d{4}$/,
            message: '请输入4位验证码',
            trigger: 'onBlur',
          },
        ],
      },
        yzm_title:'获取验证码'
      }
    },
    created(){
      this.GetUser()
      
    },
    mounted(){
      this.topheight=document.getElementById("van-bar").offsetHeight
    },
   
    methods:{
      submit() {
      editPhone({
        phone: this.phone1,
        captcha: this.code,
      }).then((res) => {
         Toast('成功修改')
    this.isshow=false

        this.GetUser()
      })
      // console.log(value);
    },
      getCode() {
     const phoneRegex =/^1[3456789]\d{9}$/;
     console.log(phoneRegex.test(this.phone1));
   if (!phoneRegex.test(this.phone1)) {
             Toast('请输入正确手机号')
            return
          }
          const TIME_COUNT = 60
          if (!this.timer) {
            this.count = TIME_COUNT
            this.countdown = false
            this.text = '重新发送'
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.countdown = true
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
       
          //发送验证码
          verify({
            phone: this.phone1,
          }).then((res) => {
            if (res.status == 200) {
              this.$toast('验证码发送成功')
            }
          })
       
    },
       GetUser() {
      getMyInfo().then((res) => {
        console.log(res.data)

        // if (!res.data.user.is_cancel) {
        //是否已完成基础信息
        this.phone = res.data.phone
        this.$store.commit('SET_USERINFO', 'res.data')
        // }
      })
    },
eidtPhone(){

Dialog.confirm({
  title: '修改手机号',
  message: '确认是否修改手机号',
})
  .then(() => {
    // on confirm
    this.isshow=true
  
  })
  .catch(() => {
    // on cancel
  });
},
      onClickLeft(){
        this.$router.back()
      },
      deluser(){
        Dialog.confirm({
  title: '注销账号',
  message: '确认是否注销账号',
})

  .then(() => {
    // on confirm
      deluser().then((res) => {
        console.log(res);
         Toast('注销成功')
          this.$store.commit('SET_USERINFO', '')
         this.$router.push('/login')
      })
  })
  .catch(() => {
    // on cancel
  });
      }
    }
}
</script>

<style  scoped>
.error-box{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.bg1{
  width: 100%;
  height: 100%;
  background-color: #1A1A1A;
  opacity: 0.5;
}
.error{
    width: 310px;
background: #FFFFFF;
position: absolute;
padding-bottom: 20px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 8px;
}
.head{
    width: 100%;
    line-height: 48px;
height: 48px;
background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);
border-radius: 8px 8px 0px 0px;
}
.head span{
     margin: 0px 24px;
     font-size: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.head img{
    float: right;
    display: inline-block;
    margin: 8px 24px;
}
.phone-box{
  width: 60%;
  margin: 0 auto;
}
.lable{
  line-height: 30px;
  font-size: 14px;
}
.phone{
  width: 180px;
  height: 25px;
  border-radius: 4px;
padding: 0 10px;
  box-sizing: border-box;
}
.yzm{
  width: 110px;
  /* font-size: 16px; */
  margin-right: 10px;
  padding: 0 10px;
  box-sizing: border-box;
    border-radius: 4px;
  height: 25px;
}
.btn{
  margin: 0 auto;
  margin-top: 20px;
width: 100%;
display: flex;
justify-content: space-between;
}
.btn .van-button{
  width: 80px;
}
 .van-cell::after{
    border-color: #D8D8D8;
}
.van-cell__value{
    color: #1A1A1A;
    font-weight: 500;
}
</style>